<template>
<div>
  <div>
    <el-page-header @back="goBack" content="商品规格">
    </el-page-header>
    <el-button type="primary" size="small" @click="dialogFormVisible=true;title='添加商品规格'">添加</el-button>
  </div>
  <el-table
    :data="specslist" 
    height="550"
    row-key="id"
    border
    stripe
    :tree-props="{children: 'children'}">

    <el-table-column label="规格编号"
      prop="id"
      width="150">
    </el-table-column>
    <el-table-column label="规格名称"
      prop="specsname"
      width="220">
    </el-table-column>
    <el-table-column label="规格属性"   
      width="220">
      <template slot-scope="item">
      <span v-for="it in item.row.attrs">
        <el-tag>
          {{it}}
        </el-tag>
      </span>
      </template>
    </el-table-column>
    <el-table-column label="状态"
      prop="status"
      width="320">
    </el-table-column>
    <el-table-column label="操作"
      fixed="right"
      width="220">
      <template slot-scope="item">
        <el-button 
          @click.native.prevent="editSpecs(item.row.id)"
          type="primary"
          icon="el-icon-edit"
          size="small">
        </el-button>

        <el-button
          @click.native.prevent="deleteRow(item.row.id)"
          type="danger"
          icon="el-icon-delete"
          size="small">
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form :model="form" ref="form">
      <el-form-item label="规格名称" :label-width="formLabelWidth">
        <el-input v-model="form.specsname" autocomplete="off"></el-input>
      </el-form-item>
        
      <el-form-item
        :label-width="formLabelWidth"
        v-for="(domain, index) in form.attrs"
        :label="'规格属性' + index"
        :key="domain.key"
        :prop="'attrs.' + index + '.value'"
        :rules="{
          required: true, message: '属性不能为空', trigger: 'blur'
        }">
        
        <el-input v-model="domain.value" style="width: 180px"></el-input>
        <el-button @click="addDomain" v-if="index==0">新增规格</el-button>
        <el-button @click.prevent="removeDomain(domain)" v-else>删除</el-button>
      </el-form-item>
  
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch v-model="form.status"
          :active-value="1"
          :incative-value="2"
        ></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible=false">取 消</el-button>
      <el-button type="primary" @click="addSpecs">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
// 引入辅助性函数
import { mapGetters, mapActions } from 'vuex'

// 引入接口
import { specsAdd, specsDelete, specsInfo, specsEdit } from '../request/api.js'

export default {
  name: 'ProductSpecs',
  computed: {
    ...mapGetters({
      specslist: 'menu/getSpecs'
    })
  },
  methods: {
    goBack() {
      this.$router.push('home')
    },
    resetForm() {
      this.dialogFormVisible = false
      this.form = {
        specsname: '', 
        attrs: [{
          value: ''
        }],
        status: 1, //状态   1正常2禁用
      }
    },
    addSpecs() {
      let temp = []
      this.dialogFormVisible = false

      for(let i in this.form.attrs) {
        temp.push(this.form.attrs[i].value)
      }
      this.form.attrs = temp.join()

      if(this.isAdd) {
        specsAdd(this.form).then(res => {
          if(res.data.code == 200) {
            this.$message.success(res.data.msg)
            this.getSpecs()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      } else {
        specsEdit(this.form).then(res => {
          if(res.data.code == 200) {
            this.$message.success(res.data.msg)
            this.getSpecs()
          } else {
            this.$message.error(res.data.msg)
          }
        }) 
      }
      this.resetForm()
    },
    editSpecs(id) {
      this.dialogFormVisible = true
      this.isAdd = false
      this.title = '编辑规格'
      specsInfo({ id }).then(res => {
        let temp = []
        res.data.list[0].attrs.forEach ( item => {
            temp.push({ 'value': item })
          }
        )
        this.form = res.data.list[0]
        this.form.attrs = temp
      })
    },
    deleteRow(id) {
      specsDelete({ id }).then(res => {
        if(res.data.code == 200) {
          this.$message.success(res.data.msg)
          this.getSpecs()
        } else {
          this.$message.error(res.data.msg)
        }
      })  
    },
    removeDomain(item) {
      var index = this.form.attrs.indexOf(item)
      if (index !== -1) {
        this.form.attrs.splice(index, 1)
      }
    },
    addDomain() {
      this.form.attrs.push({
        value: '',
        key: Date.now()
      });
    },
    ...mapActions({
      getSpecs: 'menu/getSpecsAction'
    }),
  },
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      title: '添加规格',
      isAdd: true,
      form: {
        specsname: '',
        status: 1,
        attrs: [{
          value: ''
        }]
      },
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  mounted() {
    this.getSpecs()
  }
}
</script>

<style scoped>
</style>